<template>
  <div class="alert_container">
    <section class="tip_text_container">
      <div class="tip_icon">
        <span></span>
        <span></span>
      </div>
      <p class="tip_text">{{alertText}}</p>
      <div class="confrim"
           @click="closeTip">确认</div>
    </section>
  </div>
</template>

<script>
export default {
  props: {
    alertText: String
  },

  methods: {
    closeTip () {
      // 分发自定义事件(事件名: closeTip)
      this.$emit('closeTip')
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../common/stylus/mixins.styl'
@keyframes tipMove
  0%
    transform scale(1)
  35%
    transform scale(0.8)
  70%
    transform scale(1.1)
  100%
    transform scale(1)
.alert_container
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  z-index 200
  background rgba(0, 0, 0, 0.5)
  .tip_text_container
    position absolute
    top 50%
    left 50%
    margin-top -90px
    margin-left -110px
    width 60%
    animation tipMove 0.4s
    background-color rgba(255, 255, 255, 1)
    border 1px
    padding-top 20px
    display flex
    justify-content center
    align-items center
    flex-direction column
    border-radius 5px
    .tip_icon
      width 55px
      height 55px
      border 2px solid #f8cb86
      border-radius 50%
      font-size 20px
      display flex
      justify-content center
      align-items center
      flex-direction column
      span:nth-of-type(1)
        width 2px
        height 30px
        background-color #f8cb86
      span:nth-of-type(2)
        width 2px
        height 2px
        border 1px
        border-radius 50%
        margin-top 2px
        background-color #f8cb86
    .tip_text
      font-size 14px
      color #333
      line-height 20px
      text-align center
      margin-top 10px
      padding 0 5px
    .confrim
      font-size 18px
      font-weight bold
      margin-top 10px
      background-color #4cd964
      width 100%
      text-align center
      line-height 35px
      border 1px
      color #fff
      border-bottom-left-radius 5px
      border-bottom-right-radius 5px
</style>
